<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8" />
<title>voice auto test</title>
<link rel="shortcut icon" href="./image/voice.png" type="image/png">
<link rel="stylesheet" type="text/css" href="./css/common.css" />
<link rel="stylesheet" type="text/css"
	href="./css/animate.3.7.0.min.css">
<link rel="stylesheet" type="text/css" href="./css/jedis-gui.css" />
<style type="text/css">
	.fixedSearTr {
		position: absolute;
	    top: 39px;
	    background-color: #fafafa !important;
	    z-index: 100;
	}
</style>
</head>

<body>
	<div id="voiceDataDiv" style="width: 100%; height: 100%;">
		<!-- 全局的toast提示 -->
		<div class="globalTaostDiv">
			<div
			v-for="(toast,index) in toastMessages"
			v-bind:class="{taostItem:true, successMsg: toast.type > 0, failedMsg: toast.type < 0, slideInRight: true}">
			{{toast.message}}
			<div class="closeBtn" @click="removeTaost(index)">+</div>
			</div>
		</div>
		<div class="flexContainer">
			<div class = "flex-column">
			<span>自定义文字:</span><input type="text" v-model="tempUserInputText" />
			<button @click="playInputContext">播放</button>
			</div>
			<div class = "flex-column">
				<input type="file" id="testSourceFile" @change="fileChanged" />
			</div>
			<div class = "flex-column"><button @click="uploadExcelFile">上传</button></div>
		</div>
		<div id="myScrollDiv" class="flexContainer" style="height: calc( 100% - 39px ); overflow-y: auto;">
			<table class="mytable">
				<thead>
					<tr>
						<th colspan="3">
							<div class="flexContainer">
								<div class = "flex-column" style="min-width:60px;max-width:100px;">序号</div>
								<div class = "flex-column">功能</div>
								<div class = "flex-column">内容</div>
								<div class = "flex-column">模式</div>
								<div class = "flex-column" style="min-width:200px;max-width:400px;text-align:center;">播放按钮</div>
							</div>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-bind:class="{fixedSearTr : turnToFixed}">
						<td class="rowNumber" colspan="3">
							<div class="flexContainer">
								<div class = "flex-column" style="min-width:60px;max-width:100px;">
								<span v-show="turnToFixed">序号:</span>
								<input type="text" style="width:60px;" v-model="searchParams.conentId" /></div>
								<div class = "flex-column">
								<span v-show="turnToFixed">功能:</span>
								<input type="text" v-model="searchParams.function" /></div>
								<div class = "flex-column">
								<span v-show="turnToFixed">内容:</span>
								<input type="text" v-model="searchParams.content" /></div>
								<div class = "flex-column">
								<span v-show="turnToFixed">模式:</span>
								<input type="text" v-model="searchParams.model" /></div>
								<div class = "flex-column" style="min-width:200px;max-width:400px;text-align:center;">
									<button @click="searchByCondition">搜索</button>
								</div>
							</div>
						</td>
					</tr>
					<tr v-for="(k, i) in dataList" v-show="k.show">
						<td class="rowNumber" colspan="3">
							<div class="flexContainer">
								<div class = "flex-column" style="min-width:60px;max-width:100px;">{{k.id}}</div>
								<div class = "flex-column">{{k.function}}</div>
								<div class = "flex-column" style="font-weight:bold;font-size:1.2em;">{{k.showContent}}</div>
								<div class = "flex-column">{{k.model}}</div>
								<div class = "flex-column" style="min-width:200px;max-width:400px;text-align:center;">
									<div class = "flexContainer">
										<button v-for="(kw, kwi) in k.sources" class="success flex-column" @click="playCotent(k.content[kwi], kw.sources_url, i, kwi)">
										{{kw.btnName}}
										</button>
									</div>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue.2.5.17.js"></script>
<script src="./js/axios.0.12.0.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
	var VoiceTestApp = new Vue({
		el: "#voiceDataDiv",
		data: {
			displayLoadingAnimation: false,
			isLoadingComplete: false,
			turnToFixed: false,
			appName: "voice test pannel",
			pageNumber: 1,
			pageSize: 50,
			acountPhone: "15806111769",
			tempUserInputText:"",
			toastMessages: [],
			searchParams: {
				"conentId":"",
				"function":"",
				"content":"",
				"model":""
			},
			dataList:[{"showContent":"打开收音机","content":["打开收音机","open radio",""],"sources":[
				{"btnName":"中","sources_url":"", "langType":"zh"},
				{"btnName":"英","sources_url":"", "langType":"zh"},
				{"btnName":"泰","sources_url":"", "langType":"zh"}
				]},
				{"showContent":"关闭收音机","content":["关闭收音机","close radio",""],"sources":[
					{"btnName":"中","sources_url":"", "langType":"zh"},
					{"btnName":"英","sources_url":"", "langType":"zh"},
					{"btnName":"泰","sources_url":"", "langType":"zh"}
					]}]
		},
		created: function () {
			var cachedTestData = localStorage.getItem("voiceTestDataCached");
			if (cachedTestData && cachedTestData.length > 0) {
				this.dataList = JSON.parse(cachedTestData);
			}
		},
		mounted: function () {
			document.getElementById("myScrollDiv").addEventListener('scroll', this.handleScroll);
		},
		destroyed: function () {
			document.getElementById("myScrollDiv").removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleScroll: function() {
				var scrollTop = document.getElementById("myScrollDiv").scrollTop;
				if (scrollTop && scrollTop > 50) {
					this.turnToFixed = true;
				} else {
					this.turnToFixed = false;
				}
			},
			removeTaost: function (index) {
				if (this.toastMessages[index]) {
					this.toastMessages.splice(index, 1);
				}
			},
			searchByCondition: function(e){
				var appContext = this;
				for (var ai = 0, count = appContext.dataList.length; ai < count; ai++) {
					appContext.dataList[ai].show = true;
					var markFlag = false;
					var isneedSearch = (appContext.searchParams.content.trim().length > 0 ||
							appContext.searchParams["function"].trim().length > 0 ||
							appContext.searchParams["model"].trim().length > 0 ||
							appContext.searchParams["conentId"].trim().length > 0);
					if (!isneedSearch) {
						continue;
					}
					var matchContentId = appContext.searchParams["conentId"].trim().length > 0 ?
							appContext.dataList[ai]["id"].indexOf(appContext.searchParams["conentId"]) == 0 : true;
					var matchFunction = appContext.searchParams["function"].trim().length > 0 ?
							appContext.dataList[ai]["function"].indexOf(appContext.searchParams["function"]) >= 0 : true;
					var matchModel = appContext.searchParams["model"].trim().length > 0 ?
							appContext.dataList[ai]["model"].indexOf(appContext.searchParams["model"]) >= 0 : true;
					if (matchContentId & matchFunction && matchModel) {
						appContext.dataList[ai].content.forEach(function (iterme,itermindex) {
							if (!markFlag) {
								if (isneedSearch && iterme && iterme.length > 0) {
									if (iterme.indexOf(appContext.searchParams.content) >= 0) {
										markFlag = true;
										appContext.dataList[ai].show = true;
									} else {
										appContext.dataList[ai].show = false;
									}
								}
							}
						});
					} else {
						appContext.dataList[ai].show = false;
					}
				}
			},
			playInputContext: function() {
				var appContext = this;
				if (!appContext.tempUserInputText || appContext.tempUserInputText.length == 0) {
					addErrorTaost(appContext, "请输入要播放的内容！");
					return;
				}
				axios.get(hostname + "/voice/generateVoice?langType=zh&content=" + appContext.tempUserInputText)
				.then(function (response) {
					if (response.data.code == 0) {
					    playVideoResource(appContext, response.data.data);
					} else {
						addErrorTaost(appContext, "上传文件出错");
					}
				})
				.catch(function (error) {
					addErrorTaost(appContext, 'Error! Could not reach the API. ' + error);
				});
			},
			playCotent: function(content, sources_url, rowIndex, sourceIndex) {
				var appContext = this;
				var langType = appContext.dataList[rowIndex].sources[sourceIndex].langType;
				if (sources_url && sources_url.length > 0) {
				    playVideoResource(appContext, sources_url);
				} else if (content && content.length > 0) {
					axios.get(hostname + "/voice/generateVoice?langType=" + langType + "&content=" + content)
					.then(function (response) {
						if (response.data.code == 0) {
							appContext.dataList[rowIndex].sources[sourceIndex].sources_url = response.data.data;
							playVideoResource(appContext, response.data.data);
						} else {
							addErrorTaost(appContext, "上传文件出错");
						}
					})
					.catch(function (error) {
						addErrorTaost(appContext, 'Error! Could not reach the API. ' + error);
					});
				} else {
					addErrorTaost(appContext, '暂无该资源!');
					return;
				}
				appContext.dataList[rowIndex].showContent = content;
			},
			fileChanged: function(file) {
				uploadFile(this, "testSourceFile");
			},
			uploadExcelFile: function() {
				uploadFile(this, "testSourceFile");
			}
		}
	});
	function uploadFile(vueInstance, elementId) {
		var formData = new FormData(); // 声明一个FormData对象
		var formData = new window.FormData(); // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
		formData.append('file', document.getElementById(elementId).files[0]);
		axios({
	         url: hostname + "/util/excelImport",
	         data: formData,
	         method: 'post',
	         headers: { 
	          'Content-Type': 'multipart/form-data'
	         }
	    }).then(function (res) {
			if (res.data.code == 0) {
				vueInstance.dataList = res.data.data;
				localStorage.setItem("voiceTestDataCached",JSON.stringify(vueInstance.dataList));
			}
			addSuccessTaost(vueInstance, "数据导入成功!");
		}).catch(function (error) {
			addErrorTaost(vueInstance, 'Error! Could not reach the API. ' + error);
		}); // 发送请求
	}
	function playVideoResource(vueAppInstance, resourceUrl) {
		var audio = new Audio()
	    audio.src = resourceUrl;
	    audio.play();
	    audio.onerror = function(e){
	    	addErrorTaost(vueAppInstance, '播放出错!');
	    }
	}
</script>

</html>